<template>
  <div>
    <ul class="flex flex-wrap gap-1">
      <!--选择的列表-->
      <li v-for="(item, key) in modelValue" :key="key" class="relative w-90px m-5px cursor-pointer">
        <div v-if="addons[key]">
          <div class="relative h-90px group">
            <el-image
              :src="addons[key].icon"
              alt=""
              fit="contain"
              class="w-90px h-90px rounded-10px overflow-hidden"
              @click="onSetAddonAuth(key)"
            >
              <template #error>
                <img
                  src="@/assets/default/addon.png"
                  alt=""
                  class="w-90px h-90px rounded-10px overflow-hidden"
                  @click="onSetAddonAuth(key)"
                />
              </template>
            </el-image>
            <div
              class="hidden absolute top-0 right-0 p-3px leading-14px text-white bg-[#00000050] hover:bg-black group-hover:block rounded-20px"
            >
              <el-tooltip class="box-item" effect="dark" content="移除当前应用" placement="top" :enterable="false" :show-after="500">
                <el-icon @click="closeAddon(key)"><Close /></el-icon>
              </el-tooltip>
            </div>
            <div
              v-if="addons[key].auth && addons[key].auth.length > 0"
              class="hidden absolute bottom-0 right-0 p-5px leading-14px text-white group-hover:block bg-[var(--el-color-primary)] left-0"
              @click.stop="onSetAddonAuth(key)"
            >
              <div class="flex items-center justify-center">
                <el-icon><Setting /></el-icon>权限配置
              </div>
            </div>
          </div>
          <div class="p-5px text-12px leading-16px text-center truncate">
            {{ addons[key].title }}
          </div>
        </div>
        <div v-else>
          <div class="relative h-94px">
            <img src="@/assets/default/empty.png" class="w-90px h-90px" />
            <div class="block absolute top-0 right-0 p-5px leading-14px text-white bg-[#409eff]">
              <el-icon @click="closeAddon(key)"><Close /></el-icon>
            </div>
          </div>
          <div class="border border-solid border-[#ccc] p-5px text-12px leading-16px text-center truncate text-[#f00]">已卸载</div>
        </div>
      </li>
      <!--新增按钮-->
      <li class="relative w-90px m-5px cursor-pointer" @click="onClick">
        <div class="border border-solid border-[#ccc] text-center h-90px w-90px leading-90px text-40px text-[#999]">
          <el-icon><Plus /></el-icon>
        </div>
      </li>
    </ul>
    <!--选择应用-->
    <el-dialog v-model="dialogTableVisible" :append-to-body="appendToBody" width="1000px" title="选择应用">
      <dk-choose-addon ref="addonRef" :key="dkChooseAddonKey" :addon-value="modelValue" :platform="platform" />
      <div class="text-center pt-10px">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="dialogTableVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 权限配置抽屉 -->
    <dk-auth-drawer
      v-model="dialogAuthVisible"
      :auth-item="setAuthItem"
      :default-checked-keys="setAuthDefaultCheckedKeys"
      @auth-change="authCheckChange"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Plus, Close, Setting } from '@element-plus/icons-vue'
import DkChooseAddon from './dk-choose-addon.vue'
import DkAuthDrawer from './dk-auth-drawer.vue'

defineOptions({
  name: 'DkAddonSelect'
})

const props = defineProps({
  appendToBody: {
    type: Boolean,
    default: false
  },
  placeholder: {
    default: '',
    type: String
  },
  modelValue: {
    default: () => ({}),
    type: [Object, Array]
  },
  addonsExplain: {
    default: () => ({}),
    type: [Object, Array]
  },
  platform: {
    default: false,
    type: Boolean
  }
})

const emit = defineEmits(['update:modelValue'])

const dialogTableVisible = ref(false)
const dialogAuthVisible = ref(false)
const addons = ref({ ...props.addonsExplain })
const dkChooseAddonKey = ref(0)
const addonRef = ref(null)
const setAuthItem = ref({})
const setAuthDefaultCheckedKeys = ref([])

watch(
  () => props.modelValue,
  (newVal) => {
    emit('update:modelValue', newVal)
  },
  { deep: true }
)

watch(
  () => props.addonsExplain,
  (newVal) => {
    addons.value = { ...newVal }
  },
  { deep: true }
)

// 设置应用权限
const onSetAddonAuth = (key) => {
  if (!addons.value[key] || !addons.value[key].auth || addons.value[key].auth.length === 0) return

  dialogAuthVisible.value = true
  setAuthItem.value = addons.value[key]
  setAuthDefaultCheckedKeys.value = props.modelValue[key] || ['all']
}

// 权限选择改变
const authCheckChange = (item, checkedKeys) => {
  const newValue = { ...props.modelValue }
  newValue[item.name] = checkedKeys
  emit('update:modelValue', newValue)
}

const closeAddon = (key) => {
  const newValue = { ...props.modelValue }
  delete newValue[key]
  emit('update:modelValue', newValue)
}

const onClick = () => {
  dialogTableVisible.value = true
}

const onSubmit = () => {
  console.log(addonRef.value)
  if (!addonRef.value) return

  const newValue = { ...props.modelValue, ...addonRef.value.chooseAddonValue }
  emit('update:modelValue', newValue)

  addons.value = { ...addons.value, ...addonRef.value.chooseAddonItems }
  dkChooseAddonKey.value++
  dialogTableVisible.value = false
  addonRef.value.refreshList()
}
</script>

<style>
li.choose .mark {
  display: block;
}

.cover:hover .hover-op {
  display: block;
}
</style>
